<template>
    <div style="background-color: azure; height: 1000px;">
      <h2>封禁信息表</h2>
      <table class="user-table">
        <thead>
          <tr>
            <th>序号</th>
            <th>手机号码</th>
            <th>封禁时间</th>
            <th>封禁原因</th>
          </tr>
        </thead>
        <tbody>
            <tr v-for="user in users" :key="user.id">
  <td>{{ user.id }}</td> <!-- 这里原来是 user.gender -->
  <td>{{ user.Phone_Number }}</td> <!-- 添加性别转换 -->
  <td>{{ user.Ban_Time }}</td>
  <td>{{ user.Ban_Reason }}</td>
</tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        // 假数据，实际应用中应从后端获取
        users: []
      };
    },
    mounted(){
        this.ListAllUserBan();
    },
    methods:{
        ListAllUserBan(){
        axios.get('http://localhost:8090/AdminUser/ListUserBan')
            .then(response => {
                this.users = response.data; // 假设返回的数据是用户数组
            })
            .catch(error => {
                console.error('Error fetching users:', error);
            });
    }
    }
  };
  </script>
  <style scoped>
  .table-title {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .user-table {
    width: 80%;
    margin: 0 auto; /* 水平居中 */
    border-collapse: collapse;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
  }
  
  .user-table th, .user-table td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
  }
  
  .user-table th {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
  }
  
  .user-table .table-row:nth-child(even) {
    background-color: #f2f2f2;
  }
  
  .user-table .table-row:hover {
    background-color: #e8e8e8;
  }
  
  .user-table .table-row td {
    font-size: 14px;
  }
  
  .user-table .table-row td:last-child {
    text-align: right;
  }
  </style>